<template>
  <div class="jujia">
    <!-- 遍历上面的图片和标题 -->
    <div v-if="categoryListId">
      <div class="zhezhao">
        <img class="img" :src="categoryListId.banner_url" width="100%" height="120" alt />
        <!-- 图片上的文字 -->
        <p class="img-wenzi">{{categoryListId.front_name}}</p>
        <!-- 标题 -->
        <p class="title">——{{categoryListId.name}}——</p>
      </div>
    </div>

    <!-- 遍历多个数据 -->
    <div>
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in currentCategory.subCategoryList"
          :key="item.id"
          :icon="item.wap_banner_url"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  // 接收父组件过来的数据
  props: ["categoryList", "categoryListId", "currentCategory"],
  data() {
    return {
      name: "",
      banner_url: "",
      subCategoryList: ""
    };
  },
  methods: {},
  components: {}
};
</script>

<style lang='less'  >
.jujia {
  background-color: #fff;
  height: 100%;
}
.flex {
  display: flex;
}
// 遮罩层
.zhezhao::before {
  content: "";
  width: 100%;
  height: 110.0025px;
  /* 绝对定位，保证在图片上 */
  position: absolute;
  /* 线性渐变 */
  background: rgba(0, 0, 0, 0.5);
  /* 透明度为0 */
  opacity: 0.8;
  // 圆角
  border-radius: 9.9975px;
  // 阴影
  box-shadow: 0 0 .0667rem .0267rem rgb(116, 110, 110);
}
// 图片
.img {
  // display: inline-block;
  width: 100%;
  height: 110.0025px;
  border-radius: 9.9975px;
  overflow: hidden;
}
// 图片盒子
.zhezhao {
  position: relative;
}
// 图片上的文字
.img-wenzi {
  position: absolute;
  top: 30%;
  left: 50%;
  translate: -50% -50%;
  color: #fff;
  font-size: 7.5px;
}
// 标题
.title{
padding: .2667rem 0;
text-align: center;
}
</style>
